<!--
 * @Descripttion: 设备台账参数
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-08 16:47:13
 * @LastEditTime: 2021-08-21 16:18:41
-->
<template>
    <div id="deviceLedger">
        <!-- <van-nav-bar title="设备台账" left-arrow @click-left="back" /> -->
        <Theader title="设备台账" :headerStyle="{color:'#333',backGroundColor: '#fff'}" :textStyle="{color:'#333'}"
        :titleStyle="{color:'#333'}">
        <template slot="header_arrow">
            <van-icon size="17" name="arrow-left"  @click="back"/>
        </template>
    </Theader>
        <van-tabs v-model="activeName">
            <van-tab title="资产参数" name="a"></van-tab>
            <van-tab title="物理参数" name="b"></van-tab>
            <van-tab title="运行参数" name="c"></van-tab>
        </van-tabs>
        <!-- 资产参数 -->
        <div v-show="activeName=='a'" class="assets-box">
            <div class="assets-container">
                <div class="container-title">
                    资产参数
                </div>
                <div class="container-text">
                    <van-cell-group v-for="(item,i) in assetsList" :key="i">
                        <van-cell :title="item.text1" :value="item.text2" />
                    </van-cell-group>
                </div>
            </div>
        </div>
        <!-- 物理参数 -->
        <div v-show="activeName=='b'" class="assets-box">
            <div class="assets-container">
                <div class="container-title">
                    物理参数
                </div>
            </div>
        </div>
        <!-- 运行参数 -->
        <div v-show="activeName=='c'" class="assets-box">
            <div class="assets-container">
                <div class="container-title">
                    运行参数
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Theader from "../component/header"
    export default {
        components: {
            Theader
        },
        data() {
            return {
                activeName: 'a',
                assetsList: [{
                    text1: '资产性质：',
                    text2: '省（直辖市、自治区）公司'
                }, {
                    text1: '资产单位：',
                    text2: ''
                }, {
                    text1: '资产编号：',
                    text2: '140100014907'
                }, {
                    text1: '工程编号：',
                    text2: '1310EB13503Y'
                }, {
                    text1: '工程名称：',
                    text2: '东善桥500Kv变电站扩建主变工程'
                }, {
                    text1: '设备增加方式：',
                    text2: '设备增加-基本建设'
                }, {
                    text1: '流水码：',
                    text2: 'S0087'
                }, {
                    text1: 'WBS编码：',
                    text2: '1310EB13503Y0322111Z0043'
                }, {
                    text1: '实物ID：',
                    text2: '010020000000000043143149'
                }],
            }
        },
        methods: {
            back() {
                this.$router.go(-1)
            }
        }
    }
</script>
<style>
    #deviceLedger {
        width: 100%;
        height: 100%;
        font-size: 0.9375rem;
    }

    #deviceLedger .van-nav-bar__text {
        /* color: #333333; */
    }

    #deviceLedger .van-tab--active {
        /* color: #0EB295; */
    }

    #deviceLedger .van-tabs__line {
        /* background-color: #0EB295; */
    }

    #deviceLedger .assets-box {
        height: calc(100vh - 110px);
        padding: 10px;
        background: #F5F6F7;
    }

    #deviceLedger .assets-container {
        height: calc(100% - 40px);
        overflow: auto;
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        background-image: url(../../images/image_pm_form_bg.png);
        background-size: 100% 100%;
    }

    #deviceLedger .container-text {
        font-size: 0.8125rem;
        color: #999999
    }

    #deviceLedger .container-title {
        font-size: 1.0625rem;
        padding-bottom: 10px
    }

    #deviceLedger .padding-bottom {
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }

    #deviceLedger .dynamicText {
        color: #333333;
    }

    #deviceLedger .text666 {
        color: #666666;
        /* min-width: 65px; */
    }

    #deviceLedger .van-cell {
        /* color: #666666; */
        background-color: transparent;
        /* font-size: 0.8125rem; */
    }

    #deviceLedger .van-cell__value {
        /* color: #333333; */
        /* font-size: 0.8125rem; */
        min-width: 70%;
    }

    #deviceLedger [class*=van-hairline]::after {
        /* border:none */
    }

    #deviceLedger .van-cell-group {
        background-color: transparent;
    }
</style>